<template>
	<view class="allOrder">
		<!-- :current="current" -->
		<u-tabs :list="list1"  @click="click"></u-tabs>
		<scroll-view scroll-y="true" class="scrollView" @scrolltolower="onScrollToLower">
			<view class="">
				<view v-for="(item,index) in orderList" class="itemi">
					<view class="top">
						<view class="time">{{item.orderTime}}</view>
						<view class="status" :style="{color:statusArr.find(el=>item.orderStatus==el.status).textColor}">
							{{statusArr.find(el=>item.orderStatus==el.status).text}}
						</view>
					</view>
					<view class="content" @click="topage(item)">
						<image v-if="item.mainImage" style="width: 185rpx;height: 166rpx;margin-right: 15rpx;"
							:src="item.mainImage.includes('http') ? item.mainImage : baseUrl+item.mainImage " mode="">
						</image>
						<view v-else style="width: 185rpx;height: 166rpx;margin-right: 15rpx;"></view>
						<view class="info">
							<view class="infoname">
								<view class="tag">品牌</view>
								<view class="name">{{item.productName}}</view>
							</view>
							<view class="Specifications">规格：{{item.specifications}}</view>
							<view class="price">总租金：￥{{item.totalAmount}}</view>
						</view>
					</view>
					<view class="hint" :style="{color:statusArr.find(el=>item.orderStatus==el.status).hintColor}">
						{{statusArr.find(el=>item.orderStatus==el.status).intro || '' }}
					</view>
					<!-- 加载提示 -->
				</view>
				<view v-if="!hasMore" class="no-more">没有更多数据了</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import order from '@/api/order.js';
	import pageConfig from '@/config'
	export default {
		data() {
			return {
				baseUrl: pageConfig.baseUrl,
				title: '',
				current: 0,
				list1: [{
						name: '全部',
					}, {
						name: '待下单',
					}, {
						name: '待发货'
					}, {
						name: '待收货'
					}, {
						name: '租用中'
					}, {
						name: '审核中'
					},
					{
						name: '已逾期'
					},
					// {
					// 	name: '待取货'
					// }, {
					// 	name: '待验收'
					// },
					{
						name: '已完成'
					},
					{
						name: '已取消'
					}
				],
				statusArr: [{
						status: 1,
						text: '待下单',
						intro: null,
						textColor: '#333',
						hintColor: '#1677ff'
					},
					{
						status: 2,
						text: '待发货',
						intro: '(正在备货，请保持电话通畅)',
						textColor: '#333',
						hintColor: '#1677ff'
					},
					{
						status: 3,
						text: '待收货',
						intro: null,
						textColor: '#333',
						hintColor: '#1677ff'
					},
					{
						status: 4,
						text: '租用中',
						intro: null,
						textColor: '#2ace77',
						hintColor: '#1677ff'
					},
					{
						status: 5,
						text: '审核中',
						intro: null,
						textColor: '#2ace77',
						hintColor: '#1677ff'
					},
					// {
					// 	status: 2,
					// 	text: '已逾期',
					// 	intro: '(请尽快与客服联系，否则将影响您的征信)',
					// 	textColor: '#ee5260',
					// 	hintColor: '#ee5260'
					// },
					{
						status: 9,
						text: '已逾期',
						intro: null,
						textColor: '#2ace77',
						hintColor: '#1677ff'
					},
					// {
					// 	status: 4,
					// 	text: '审核通过',
					// 	intro: '(待用户寄回商品)',
					// 	textColor: '#2ace77',
					// 	hintColor: '#1677ff'
					// },
					// {
					// 	status: 5,
					// 	text: '审核中',
					// 	intro: '(商家将在48小时内处理订单申请)',
					// 	textColor: '#ee5260',
					// 	hintColor: '#1677ff'
					// },
					// {
					// 	status: 6,
					// 	text: '已发货',
					// 	intro: null,
					// 	textColor: '#1677ff',
					// 	hintColor: '#1677ff'
					// },
					{
						status: 7,
						text: '已完成',
						intro: null,
						textColor: '#333',
						hintColor: '#1677ff'
					},
					{
						status: 8,
						text: '已取消',
						intro: null,
						textColor: '#333',
						hintColor: '#1677ff'
					},
					// {
					// 	status: 8,
					// 	text: '逾期待结算',
					// 	intro: '(请尽快完成支付)',
					// 	textColor: '#ee5260',
					// 	hintColor: '#ee5260'
					// },
					// {
					// 	status: 9,
					// 	text: '待取货',
					// 	intro: null,
					// 	textColor: '#2ace77',
					// 	hintColor: '#1677ff'
					// }, {
					// 	status: 10,
					// 	text: '待验收',
					// 	intro: null,
					// 	textColor: '#1677ff',
					// 	hintColor: '#1677ff'
					// }
				],
				orderList: [],
				params: {
					pageSize: 10,//内容数
					pageNum: 1,//页数
					orderStatus: '',//订单对应的下标
				},
				hasMore: true, // 是否还有更多数据
				option: {}
			}
		},
		onLoad(option) {
            this.params.orderStatus=option.index;
            
			console.log('option',option);
			// this.current= Number(option.status)

			// this.params.orderStatus = option.status == '0' ? '' : option.status
			// this.params.orderStatus = option.status

			this.getOrderList()
		},
		onShow() {
			// console.log(this.list1, 'list1');
			// this.current = Number(this.option.status)
		},
		methods: {
			click(item) {
				console.log('item.index', item.index);
				this.params = {
					pageSize: 10,
					pageNum: 1,
                    
					orderStatus: item.index == '0' ? '' : item.index == '6' ? '9' : item.index,
					orderStatus1: item.index,
				}
				this.hasMore = true
				this.getOrderList()
			},
			open(index) {
				switch (index) {
					case 1:
						this.show = true
						this.title = '续租'
						break;
					case 2:
						this.show = true
						this.title = '逾期'
						break;
					case 3:
						this.show = true
						this.title = '提前归还'
						break;
					default:
						break;
				}
				// console.log('open');
			},
			topage(item) {
				uni.navigateTo({
					url: '/subPages/mine/transaction?id=' + item.id
				})
			},
			getOrderList() {
				console.log(this.params, 'this.params');
				order.leaseOrderList(this.params).then(res => {
					console.log(res, 'res.data');
					if (res.code == 200) {
						if (res.rows.length < this.params.pageSize || res.total <= this.params.pageSize) {
							this.hasMore = false;
						}
						if (this.params.pageNum === 1) {
							this.orderList = res.rows
						} else {
							this.orderList = this.orderList.concat(res.rows);
						}
						console.log(this.orderList, 'res');
					}
				})
			},
			close() {
				this.show = false
				// console.log('close');
			},
			pay() {
				uni.navigateTo({
					url: "/subPages/mine/pay"
				})
			},
			onScrollToLower() {
				console.log('触发加载');
				// 滚动到底部时加载更多数据
				if (this.hasMore) {
					this.params.pageNum++;
					this.getOrderList();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.allOrder {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		color: #333;

		.scrollView {
			width: 100%;
			height: calc(100vh - 234rpx);

			.itemi {
				width: 100%;
				background-color: #f8f9ff;
				border-radius: 25rpx;
				margin: 20rpx 0;

				.top {
					width: 100%;
					padding: 15rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #dbdbdb;
					font-size: 24rpx;
				}

				.content {
					width: 100%;
					padding: 15rpx;
					box-sizing: border-box;
					display: flex;
					background-color: #f8f9ff;

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}

					.infoname {
						display: flex;
						align-items: center;

						.tag {
							width: 64rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							color: #1677ff;
							background-color: #deecff;
							border-radius: 25px;
							font-size: 20rpx;
							margin-right: 8rpx;
						}

						.name {
							font-size: 28rpx;
						}
					}

					.Specifications {
						color: #777;
						font-size: 24rpx;
					}

					.price {
						font-size: 24rpx;
					}

				}

				.hint {
					padding: 15rpx;
					box-sizing: border-box;
					font-size: 20rpx;
				}
			}

		}

		.no-more {
			width: 100%;
			text-align: center;
		}
	}
</style>